<template>
	<view class="content">
		<view class="flexbc" style="padding: 40rpx;background: #fff;border-radius: 30rpx;">
			<view class="flexci">
				<image :src="person.head_img" style=" width: 100rpx;height: 100rpx;border-radius: 50rpx;margin-right: 20rpx;"></image>
				<view>
					<view style="color: #333; font-size: 32rpx;">{{person.nickname}}</view>
					<view style="color: #333;">{{person.mobile}}</view>
				</view>
			</view>
			<view>
				<view style="line-height: 58rpx; width: 122rpx;background: #F4F4F4;border-radius: 29rpx;text-align: center;" @click="go('/pages/qian/shiming')" v-if="!yue.realname">未实名</view>
				<view style="line-height: 58rpx; width: 122rpx;background: #fff;border-radius: 29rpx;text-align: center; color:#00CECD;border: 1px #07D5D4 solid;" v-if="yue.realname">已实名</view>
			</view>
		</view>
		<view class="flex" style="background: #FFF8D4;margin-top: 20rpx;color: #6F6F6F;padding: 20rpx;border-radius: 10rpx;"  v-if="!yue.realname">
			参赛选手请<view style="color: #007CFF;" @click="go('/pages/qian/shiming')">实名认证</view>后领取被打赏资金
		</view>
		<view style="padding: 40rpx;background: #fff;border-radius: 30rpx; color:#333;text-align: center;margin-top: 20rpx;">
			<view style="margin-bottom: 44rpx; font-size: 26rpx;">账户余额（派币）</view>
			<view style="margin-bottom: 108rpx; font-size: 72rpx; position:relative" @click="go('/pages/qian/shouzhi')">
				{{yue.balance}}
				<image src="https://cdn.rockysports.cn/h5zhibo/jiantou.png" style="width: 14rpx;height: 22rpx;position: absolute;right: 120rpx;top: 40rpx;"></image>
			</view>
			<view class="flexb"> 
				<view style="width: 300rpx;line-height: 100rpx;border: 1px #DFDFDF solid;border-radius: 20rpx; font-size: 32rpx;" @click="go('/pages/qian/tixian')">提现</view>
				<view style="width: 300rpx;line-height: 100rpx;border: 1px #07D5D4 solid;border-radius: 20rpx;background: #07D5D4;color: #fff; font-size: 32rpx;" @click="chongzhilog = true">充值</view>
			</view>
		</view>
		<view style="padding: 40rpx;background: #fff;border-radius: 30rpx; margin-top: 20rpx;:#333;text-align: center;">
			<view style=" font-size: 28rpx; color: #333;text-align: left;margin-bottom: 30rpx;">本场·{{group_name}}</view>
			<view class="flexb">
				<view style="background: #FBFBFB;text-align: center;border-radius: 16rpx;padding: 30rpx 0;width: 300rpx;">
					<view style=" margin-bottom: 30rpx;">打赏支出（派币）</view>
					<view style=" color: #FF5B1D; font-size: 40rpx;position: relative;"  @click="go('/pages/qian/shouzhi2?index=1')">
						{{yue.rewardother}}
						<image src="https://cdn.rockysports.cn/h5zhibo/jiantou.png" style="width: 14rpx;height: 22rpx;position: absolute;right: 20rpx;top: 15rpx;"></image>
					</view>
				</view>
				<view style="background: #FBFBFB;text-align: center;border-radius: 16rpx;padding: 30rpx 0;width: 300rpx;">
					<view style=" margin-bottom: 30rpx;">被打赏收入（派币）</view>
					<view style=" color: #007CFF; font-size: 40rpx;line-height: 40rpx;position: relative;" @click="go('/pages/qian/shouzhi2?index=2')" v-if="yue.realname">
					{{yue.rewardme}}
						<image src="https://cdn.rockysports.cn/h5zhibo/jiantou.png" style="width: 14rpx;height: 22rpx;position: absolute;right: 20rpx;top: 15rpx;"></image>
					</view>
					<view style=" color: #007CFF; font-size: 30rpx;line-height: 40rpx;" @click="go('/pages/qian/shiming')" v-if="!yue.realname">实名认证后查看</view>
				</view>
			</view>
		</view>
		<view style="color: #8D8D8D;padding: 20rpx 10rpx;line-height: 40rpx;" >
			<view>
				<image src="https://cdn.rockysports.cn/h5zhibo/tanhao.png" style="width: 26rpx; height: 26rpx; margin-right:10rpx; float: left; position:relative; top:7rpx;"></image>
				友情提示：您的账户资金存于微步计时账户，资金不因赛事切换清空，可在所有微步计时支撑的赛事直播中使用
			</view>
			
			
		</view>
		
		<u-popup :show="chongzhilog" mode="bottom" :round="10" @close="close2" class="liwuc3">
			<view class="liwuc2">
				<view style="font-size: 33rpx; font-weight: bold; text-align: center; padding: 30rpx;">充值</view>
				<!-- <view>余额：{{yue.balance}}步币</view> -->
				<view class="flexb" style="flex-wrap: wrap;">
					<view :class="chongzhiid == item.id?'czli czliact flexcc':'czli flexcc'"
						@click="chongzhiid = item.id" v-for="item in qianlist" :key="item.id">
						<view style="text-align: center;">
							<view style="font-size: 34rpx; margin-bottom: 10rpx;">{{item.name}}</view>
							<view style="color: #686868;">{{item.price}}元</view>
						</view>
		
					</view>
				</view>
		
				<view v-if="!ing" @click="chongzhigo()"
					style="background: #E62B49; text-align: center; color:#FFFFFF; padding: 25rpx; border-radius: 60rpx; font-size: 29rpx; margin-top: 30rpx;">
					立即充值
				</view>
				<view v-if="ing"
					style="background: #E62B49; text-align: center; color:#FFFFFF; padding: 25rpx; border-radius: 60rpx; font-size: 29rpx; margin-top: 30rpx;">
					充值中...
				</view>
			</view>
		</u-popup>
		
		<u-overlay :show="loading">
			<view class="flexcc" style="width: 100vw;height: 100vh;">
				<u-loading-icon color="#fff" text="加载中" :vertical="true" textColor="#fff"></u-loading-icon>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				chongzhilog:false,
				ing:false,
				yue:"",
				chongzhiid:"",
				qianlist:"",
				person:"",
				group_name:""
			}
		},
		onLoad() {
			this.person = JSON.parse(uni.getStorageSync('person'))
			this.group_name = uni.getStorageSync('group_name')
			
			
		},
		onShow() {
			Promise.all([this.getqianlist(),this.getyue()]).then(()=>{
				this.loading = false
			})
			uni.$u.http.get(this.urlass + '/api/v1/auth/me', {
				params: {
					token: uni.getStorageSync('token')
				}
			}).then(res => {
				uni.setStorageSync('person', JSON.stringify(res.data.data))
			})
		},
		methods: {
			close2:function(){
				this.chongzhilog = false
			},
			chongzhigo: function(id) {
				if (!this.chongzhiid) {
					this.$refs.uToast.show({
						message: '请选择充值金额'
					})
					return false
				}
				this.ing = true
				var that = this
				uni.$u.http.post(this.urlass + '/api/v1/users/charge', {
					product_id: this.chongzhiid,
					payment_method: "wx_mp",
					token: uni.getStorageSync('token')
				}).then(res2 => {
					if (res2.data.code == 200) {
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": res2.data.data.payInfo.appId,
								'timeStamp': res2.data.data.payInfo.timeStamp,
								'nonceStr': res2.data.data.payInfo.nonceStr,
								'package': res2.data.data.payInfo.package,
								'signType': res2.data.data.payInfo.signType,
								'paySign': res2.data.data.payInfo.paySign,
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									that.$refs.uToast.show({
										message: '充值成功'
									})
									that.chongzhilog = false
									that.ing = false
								} else {
									that.ing = false
								}
							});
					} else {
						this.$refs.uToast.show({
							message: res2.data.message,
							type: "error"
						})
						this.ing = false
					}
				})
			},
			getyue: function() {
				return new Promise((r,j)=>{
					uni.$u.http.get(this.urlass + '/api/v1/users/account2', {
						params: {
							token: uni.getStorageSync('token'),
							game_id:uni.getStorageSync('activity_id')
						}
					}).then(res => {
						this.yue = res.data.data
						r('ok')
					})
				})
			},
			getqianlist: function() {
				return new Promise((r,j)=>{
					uni.$u.http.get(this.urlass + '/api/v1/users/charge-product', {
						params: {
							token: uni.getStorageSync('token')
						}
					}).then(res => {
						this.qianlist = res.data.data
						r('ok')
					})
				})
			},
			//去地图调中心点
			dingweidao:function(item){
				this.$bus.$emit('dingweidao', item); 
				uni.navigateBack()
			},
			gos:function(item){

				uni.setStorageSync('checkren',JSON.stringify(item))
				this.$nextTick(item=>{
					this.eventChannel.emit('songliwu',1)
					uni.navigateBack()
				})
				
			},
			guanzhu: function(id, type) {
				//获取人
				uni.$u.http.post(this.urlass + '/api/position/position/focusliveuser', {
					game_id: uni.getStorageSync('activity_id'),
					user_id: JSON.parse(uni.getStorageSync('person')).id,
					focus_id: id,
					type: type,
					package_id:uni.getStorageSync('pack_id')
				}).then(res => {

					if (res.data.msg.code == 0) {
						if (type == 1) {
							// this.$refs.uToast.show({
							// 	message: "关注成功",
							// 	type: "success"
							// })
						} else {
							// this.$refs.uToast.show({
							// 	message: "取消关注成功",
							// 	type: "error"
							// })
						}

						this.getlist()
					}else{
						this.$refs.uToast.show({
							message: res.data.msg.info,
							type: "error"
						})
					}
				})
			},

			getlist: function() {
				//获取人
				uni.$u.http.get(this.urlass + '/api/position/position/allliveuser', {
					params: this.sear
				}).then(res => {
					this.list = res.data.data.data
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content { background: #F9F9F9; padding: 20rpx; min-height: 100vh;
		.liwuc2 {
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 30rpx;
			flex-wrap: wrap;
		
			.czli {
				width: 210rpx;
				height: 120rpx;
				border: 1px #f4f4f4 solid;
				border-radius: 5rpx;
				background: #FFFFFF;
				margin-top: 20rpx;
				background: #f4f4f4;
			}
		
			.czliact {
				border: 1px #E62B49 solid;
			}
		}
	}
</style>
